<template>
  <view class="container gray_bg personnel_main">
    <view class="header_search">

      <view class="search_input">
        <view class="search_icon" @click="search" ><tm-icon :font-size="36" name="tmicon-search"></tm-icon></view>
        <tm-input :searchWidth="120" v-model="searchParams.real_name" placeholder="支持姓名/手机号搜索"></tm-input>
      </view>
    </view>
    <view class="page_title">
      <text class="page_title_text">人员列表</text>
      <text class="page_title_sub">（{{userList.length}}人）</text>
    </view>
    <view>
      <view v-for="(item, i) in userList" :key="i" @click="() => heckUserDetail(item)">
        <user-section :userData="item" />
      </view>
    </view>
    <view class="cus_footer_btn">
      <tm-button block label="添加人员" round="25" @click="addUser"></tm-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getUserList } from '@/api_request/api'
import utils from '@/utils/index';
import {storeToRefs} from "pinia";
import { useInfoStore } from '@/store/userInfo';
import { onReachBottom } from '@dcloudio/uni-app';


const userStore = useInfoStore()
const { userInfo } : any = storeToRefs(userStore)
const merchant_id = ref(userInfo.value.merchant_id)
const userList = ref<any>([])
const searchParams = reactive<any>({
  real_name: ''
})
const page_num = ref<number>(1)
const page_size = ref<number>(10)
const totalRows = ref<number>(0)
 const unitData = async () => {
   const {data} = await getUserList({merchant_id: merchant_id.value, real_name: searchParams.real_name, page_num: page_num.value, page_size: page_size.value})
   console.log('jp=======data======人员列表',data)
   userList.value = data.list
   totalRows.value = data.total
 }
unitData()
const search = (e: any) => {
  console.log('搜索',searchParams.real_name)
  unitData()
}
const addUser = () => {
//   添加人员
  uni.navigateTo({url: `/subpkg/addUser/index?title='添加人员信息'`})
}
const heckUserDetail = (item) => {
  const data = JSON.stringify(item)
  uni.navigateTo({url: `/subpkg/personnelInfo/index?data=${data}`})
}
const refreshData = (data) =>{
  getUserList({
    merchant_id: merchant_id.value, real_name: searchParams.real_name,
    page_size: page_size,
    ...data
  }).then(res => {
    const __userList = [...userList.value]
    __userList.push(...res.data.list)
    userList.value = __userList
    totalRows.value = res.data.total
    page_num.value = page_num + 1
  })
}
onReachBottom(() => {
  console.log('jp=======下拉刷新',userList.value?.length, totalRows.value)
  let curPage: number = 0
  if(userList.value?.length === totalRows.value) {
    uni.$showMsg('数据已全部加载完成！')
  } else {
    curPage = page_num.value + 1
    refreshData({page_num: curPage})
  }
})

</script>
<style lang="scss" scoped>
  .personnel_main{
    height: 100%;
    .header_search{
      background: #fff;
      padding: 16px 10px;
      .search_input{
        position: relative;
        padding-left: 20px;
        background: rgb(245 245 245);
        border-radius: 4px;
      }

      .search_icon{
        position: absolute;

        top: 7px;
        left:10px;
      }
    }
    .page_title{
      padding: 12px 10px 6px;
      .page_title_text{
        font-size: $cus-font-size-16;
        font-weight: $cus-font-weight;
      }
      .page_title_sub{
        font-size: $cus-font-size-12;
        color: $cus-color-1;
      }
    }

  }
</style>